import { TComponent } from '@material/typeing';
import { FunctionComponent, ReactNode } from 'react';
import KImage, { ImageProps } from '../image';
import $style from './index.scss';

export type LoadingDirection = 'horizontal' | 'vertical';

export interface LoadingProps extends TComponent {
    src: string;
    direction: LoadingDirection;
    icon?: ReactNode;
    iconSize: number;
    iconProps: ImageProps;
}

const defaultProps = {
    direction: 'vertical',
    type: 'spinner',
    src: 'https://kf-ui.cdn-go.cn/weapp-image/latest/weapp-110/image/v5/loading.png'
};

const KLoading: FunctionComponent<Partial<LoadingProps> & React.HTMLAttributes<HTMLDivElement>> = (
    props
) => {
    const { className, style, children, direction, icon, iconSize, iconProps, src } = {
        ...defaultProps,
        ...props
    };

    return (
        <div
            className={[$style.loading, { [$style.vertical]: direction === 'vertical' }, className]}
            style={style}
        >
            <div className={[$style.wrap]}>
                {icon || (
                    <KImage
                        src={src}
                        className={$style.icon}
                        size={iconSize}
                        {...iconProps}
                    />
                )}
            </div>
            {children ? <div className={$style.text}>{children}</div> : ''}
        </div>
    );
};

KLoading.displayName = 'KLoading';

export default KLoading;
